<!--  -->
<template>
  <el-dialog title="添加关键词" :visible.sync="dialogShow" :width="'480px'" :close-on-click-modal="false" @close="close">
    <div class="add-container-u" v-loading="loading">
      <el-form :rules="rules" :model="word" :inline="true" ref="formValidate">
        <el-form-item label="" label-width="'0px'" style="margin-bottom: 0px;" prop="value">
          <el-input placeholder="请输入关键词" size="medium" style="width: 440px;" maxlength="500"
            v-model.trim="word.value">
          </el-input>
          </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="close">取消</el-button>
      <el-button size="small" type="primary" @click="saveclose">添加</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    addResetWord: {
      type: Function
    }
  },
  created () {
  },
  data () {
    var checkWords = (rule, value, callback) => {
      let wordReg = /^[\u4e00-\u9fa5A-Za-z]*$/
      if (value === '') {
        callback(new Error('关键词不能为空'))
      } else if (wordReg.test(value)) {
        return callback()
      } else {
        callback(new Error('请输入汉字、英文词语；不支持空格、特殊字符、数字。'))
      }
    }
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      loading: true,
      word: {
        value: ''
      },
      rules: {
        value: [
          { required: false, message: '请输入关键词', trigger: 'blur' },
          { validator: checkWords, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
  },
  methods: {
    show () {
      this.dialogShow = true
      this.loading = false
    },
    close () {
      this.dialogShow = false
      this.word.value = ''
      if (this.$refs['formValidate']) {
        this.$refs['formValidate'].clearValidate()
      }
    },
    saveclose () {
      if (this.loading) {
        return
      }
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.addResetWord(this.word.value)
          this.close()
        } else {
          this.loading = false
        }
      })
    }
  },
  components: {
  }
}
</script>

<style scoped lang="scss">
.add-container-u{
  /deep/ .el-button--mini{
    padding: 7px;
  }
  .item .item-opt {
    float: right;
  }
}

</style>
